<script setup>
import {
    Edit, Delete,
    Check,
    Message,
    Search,
    Star, Close, InfoFilled

} from "@element-plus/icons-vue";
import { onUpdated, ref } from "vue";
import Pass from '@/assets/pass.png'
import Reject from '@/assets/reject.png'
import { applicationListService } from '@/api/message.js'
import useSystemParameter from '@/stores/useSystemParameter.js'
const systemParameter = useSystemParameter();
import useUserInfoStore from '@/stores/userInfo';
const userInfoStore = useUserInfoStore()
import { applyService } from '@/api/message'

//分页条数据模型
const pageNum = ref(1); //当前页
const total = ref(); //总条数
const pageSize = ref(5); //每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size;
    applicationList();
};
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num;
    applicationList();
};
const applications = ref();//我的申请 数据
const applyRole = ref();
const applicationList = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value
    };
    let result = await applicationListService(params);
    //渲染到视图上
    total.value = result.data.total;
    applications.value = result.data.items;

    //为messages扩展一个属性typename,用于显示分类名称
    for (let i = 0; i < applications.value.length; i++) {
        let application = applications.value[i]; //当前文章数据
        application.stateName = systemParameter.getApplicationStateName(application.state);//状态名
        application.oldRoleName = systemParameter.getRoleName(application.oldRole);//旧权限名
        application.newRoleName = systemParameter.getRoleName(application.newRole);//新权限名
    }
    console.log(applications.value);

    if (result.status === 1) {
        ElMessage.error(result.message ? result.message : "查找失败");
    } else if (result.data.total === 0) {
        ElMessage.error("没有符合条件的信息");
    }
    console.log("共查询到" + result.data.total + "条信息");
};
applicationList();

const showApply = ref(false);//新增申请栏
const apply = async () => {
    if (applyRole.value !== undefined) {
        const result = await applyService(applyRole.value)
        if (result.code === 0) {
            ElMessage.success("发送消息成功")
            showApply.value = false;
            applicationList();
        }
    } else {
        ElMessage.error("请先选择要申请的权限");
    }

}

import { withdrawApplyService } from '@/api/message'
const withdraw = async (row) => {
    const result = await withdrawApplyService(row.id)
    if (result.code === 0) {
        ElMessage.success(result.message ? result.message : '撤回消息成功')
        applicationList();
    }
}

import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { ElMessage } from "element-plus";

// //上传成功的回调函数
// const uploadSuccess = (result) => {
//     registerData.value.userPic = result.data;
//     console.log(result.data);
// }


import { computed } from "vue";
import coverImage from "@/assets/readed.png";
// 计算背景图片的样式
const cardBackgroundStyle = computed(() => {
    return {
        backgroundImage: detailMessage.value.state === "已读" ? `url(${coverImage})` : null,
        backgroundSize: "60px",
        backgroundPosition: "80% 80%",
        backgroundRepeat: "no-repeat",
    };
});


</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>我的申请</span>
                <div class="extra">
                    <el-button type="primary" @click="showApply = !showApply">新增申请</el-button>
                </div>
            </div>
        </template>


        <!-- 新增申请栏 -->
        <div v-if="showApply">
            {{ userInfoStore.roleName }} ->
            <el-select placeholder="请选择" v-model="applyRole" style="width: 200px;">
                <el-option v-for="c in systemParameter.roles" :key="c.role" :label="c.roleName" :value="c.role">
                </el-option>
            </el-select>

            <el-steps :space="200" :active="0" finish-status="success">
                <el-step title="申请" />
                <el-step title="等待" />
                <el-step title="通过" />
                <el-popconfirm confirm-button-text="提交" cancel-button-text="再想想" :icon="InfoFilled" icon-color="#626AEF"
                    title="提交会向所有管理员用户发送消息通知，请耐心等待" @confirm="apply()">
                    <template #reference>
                        <el-button circle plain type="primary" class="button-with-image">
                            <img src="@/assets/apply.png" alt="icon" class="button-image" />
                            提交</el-button>
                    </template>
                </el-popconfirm>
            </el-steps>
            <el-divider content-position="left">已申请的消息</el-divider>
        </div>

        <!-- 我的申请列表 -->

        <div v-for="c in applications">
            {{ c.oldRoleName }}->{{ c.newRoleName }}

            <!-- <el-tag type="info" v-if="c.state !== 'waiting'"> {{ c.updateTime }}</el-tag> -->
            <el-steps :space="200" :active="1" finish-status="success" v-if="c.state === 'waiting'">
                <el-step title="申请" :description="c.createTime"/>
                <el-step title="等待" />
                <el-step title="审批" />
                <el-popconfirm confirm-button-text="撤回" cancel-button-text="再想想" title="是否撤回申请，包括已发出的申请消息？"
                    @confirm="withdraw(c)" @cancel="ElMessage('取消撤回')">
                    <template #reference>
                        <el-button circle plain type="primary" class="button-with-image">
                            <img src="@/assets/reset.png" alt="icon" class="button-image" />
                            撤回</el-button>
                    </template>
                </el-popconfirm>
            </el-steps>
            <el-steps :space="200" :active="3" finish-status="success" v-else>
                <el-step title="申请" :description="c.createTime"/>
                <el-step title="等待" />
                <el-step :title="c.stateName" :status="c.state === 'passed' ? 'success' : 'error'" :description="c.updateTime"/>
            </el-steps>
            <el-divider border-style="dashed" />
        </div>


        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />

        <!-- 消息详细展示表单 -->
        <el-dialog v-model="dialogVisible_deteil" title="showApplication" width="60%" @close="closeDialog()">
            <el-card class="page-container" :style="cardBackgroundStyle">
                <!-- 称呼 -->
                <!-- <div>
          尊敬的[{{ userInfoStore.roleName }}]
          {{
          userInfoStore.info.nickname
            ? userInfoStore.info.nickname
            : userInfoStore.info.username
        }}：
        </div> -->

                <!-- 正文 -->
                <div v-if="detailMessage.messageType === 1">
                    <el-tag type="info"> {{ detailMessage.typeName }}</el-tag>
                    <!-- 申请信正文 -->
                    权限变更申请：{{ systemParameter.getRoleName(detailMessage.content.oldRole) }} -> {{
                        systemParameter.getRoleName(detailMessage.content.newRole) }}
                    <el-button plain type="primary" class="button-with-image" circle @click="handleApplication('pass')"
                        v-if="detailMessage.content.state === 'waiting'"><img src="@/assets/pass.png"
                            class="button-image" /></el-button>
                    <el-button plain type="primary" class="button-with-image" circle
                        @click="handleApplication('reject')" v-if="detailMessage.content.state === 'waiting'"><img
                            src="@/assets/reject.png" class="button-image" /></el-button>
                    <el-button plain type="primary" class="button-with-image" circle
                        @click="handleApplication('waiting')" v-else><img src="@/assets/reset.png"
                            class="button-image" /></el-button>


                </div>
                <div v-else-if="detailMessage.messageType === 2">
                    <el-tag type="success"> {{ detailMessage.typeName }}</el-tag>
                    <!-- 通知信正文 -->
                    {{ detailMessage.content }}
                </div>
                <div v-else-if="detailMessage.messageType === 3">
                    <el-tag type="warning"> {{ detailMessage.typeName }}</el-tag>
                    <!-- 警告正文 -->
                    {{ detailMessage.content }}
                </div>
                <!-- 落款 -->
                <!-- 由系统账户发出的，特殊处理 -->
                <div align="right" v-if="detailMessage.sendUser.username !== 'system'">
                    {{ detailMessage.sendUser.roleName }}
                    {{
                        detailMessage.sendUser.nickname
                            ? detailMessage.sendUser.nickname
                            : detailMessage.sendUser.username
                    }}
                </div>
                <div align="right" v-else>系统通知</div>
                <!-- 时间 -->
                <div align="right">{{ detailMessage.createTime }}</div>
            </el-card>

            <!-- <el-descriptions :title="detailMessage.title" direction="vertical" :column="4" border>
                <el-descriptions-item label="状态">{{ detailMessage.state }}</el-descriptions-item>
                <el-descriptions-item label="类型" :span="2">
                    <div v-if="detailMessage.messageType === 3">
                        <el-tag type="warning"> {{ detailMessage.typeName }}</el-tag>
                    </div>
                    <div v-else-if="detailMessage.messageType === 1">
                        <el-tag type="info"> {{ detailMessage.typeName }}</el-tag>
                    </div>
                    <div v-else-if="detailMessage.messageType === 2">
                        <el-tag type="success"> {{ detailMessage.typeName }}</el-tag>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="时间">
                    <el-tag size="small">{{ detailMessage.createTime }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="操作人">
                    <el-link>
                        {{ detailMessage.sendUser.nickname ? detailMessage.sendUser.nickname : detailMessage.sendUser.username }}
                        <i class="el-icon-view el-icon--right" @click=""></i>
                    </el-link>
                </el-descriptions-item>
                <el-descriptions-item label="正文">{{ detailMessage.content }}</el-descriptions-item>
            </el-descriptions> -->

            <!-- <el-form :model="detailMessage" label-width="100px" style="padding-right: 30px">
                <el-form-item label="正文">
                    <el-input v-model="detailMessage.content" disabled type="textarea" autosize></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-input v-model="detailMessage.state" disabled></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-input v-model="detailMessage.typeName" disabled></el-input>
                </el-form-item>
                <el-form-item label="时间">
                    <el-input v-model="detailMessage.createTime" disabled></el-input>
                </el-form-item>
            </el-form> -->
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible_deteil = false">返回</el-button>
                    <el-button type="primary" @click="read(detailMessage.id)" v-if="detailMessage.state === '未读'">
                        ({{ detailMessage.time }})标记已读
                    </el-button>
                </span>
            </template>
        </el-dialog>


    </el-card>
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.avatar-show {
    :deep() {
        .avatar {
            width: 50px;
            height: 50px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }
}

//多选样式
.custom-radio {
    width: 40px;
    /* 设置按钮的固定宽度，可以根据需要调整 */
}

/* 抽屉样式 */
.avatar-uploader {
    :deep() {
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }
}

.editor {
    width: 100%;

    :deep(.ql-editor) {
        min-height: 200px;
    }
}

//图像按钮
.button-with-image {
    position: relative;
    // border:1px solid rgb(23, 110, 172);
    /* 确保按钮内部的定位基于按钮本身 */
    padding: 0;
    /* 根据需要调整内边距以适应图像 */
}

.button-with-image .button-image {
    max-width: 100%;
    /* 限制图像的最大宽度 */
    max-height: 100%;
    /* 限制图像的最大高度 */
    display: block;
    /* 避免底部的空白间隙 */
    border-radius: 50%;
    /* 使图像显示为圆形 */
}

/* 为 el-badge 添加左边距 */
.item {
    margin-left: 0.3em;
    /* 1em 大约相当于当前字体大小的空间，可以根据需要调整 */
}
</style>
